<template>
  <div class="overview">
    <div class="header">
      <div class="title" @click="open()">业务概览</div>
      <div class="date">{{data.date_time}}</div>
    </div>
    <div class="content">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tbody>
        <tr>
          <td width="50%">
            <div class="info">
              <div class="name">客户数</div>
              <div class="desc rise" v-if="data.customer_rollrate>0">
                <img class="img" src="./rise.png" alt="">
                环比{{data.customer_rollrate}}%
              </div>
              <div class="desc drop" v-else>
                <img class="img" src="./drop.png" alt="">
                环比{{data.customer_rollrate}}%
              </div>
            </div>
            <div class="num">
              {{data.customer_total || '-'}}<span class="unit">万</span>
            </div>
            <img class="icon" src="./ov_user.png">
          </td>
          <td width="50%">
            <div class="info">
              <div class="name">业务数</div>
              <div class="desc rise" v-if="data.service_rollrate>0">
                <img class="img" src="./rise.png" alt="">
                环比{{data.service_rollrate}}%
              </div>
              <div class="desc drop" v-else>
                <img class="img" src="./drop.png" alt="">
                环比{{data.service_rollrate}}%
              </div>
            </div>
            <div class="num">
              {{data.service_num || '-'}}<span class="unit">万</span>
            </div>
            <img class="icon" src="./ov_busi.png">
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'overview',
  props: {
    data: Object
  },

  methods: {
    open() {
      this.$router.push({
        name: 'overview'
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .overview
    margin-top : 20px
    background : #fff
    border-radius : 6px

  .header
    height : 88px
    overflow : hidden
    border-bottom : 1px solid #eee

  .title
    float : left
    margin-top : 20px
    padding : 8px 20px
    font-size : 28px
    border-radius : 0 22px 22px 0
    background : #ff9a3f
    color : #fff

  .date
    float : right
    margin-top : 32px
    margin-right : 20px
    font-size : 24px
    color : #999

  td
    position : relative
    padding : 20px
    font-size : 28px
    &:nth-of-type(2n)
      border-left : 1px solid #eee

  .info
    display : flex
    margin-bottom : 20px

  .name
    margin-right : 20px

  .desc
    font-size : 24px
    .img
      width : 18px
      height : 18px

  .num
    font-size : 48px

  .unit
    font-size : 30px

  .icon
    position : absolute
    top : 50%
    right : 10%
    transform : translateY(-50%)
    max-width : 20%
    max-height : 100%

  .rise
    color : #48ff7c

  .drop
    color : #48ff7c
</style>
